<template>
  <el-dialog :title="title" :visible.sync="open" width="620px" append-to-body @close="handleCancel" destroy-on-close>
    <hk-form
      ref="hkFormRef"
      :formLabels="formObj.formLabels"
      :rules="formObj.formRules"
      :data="formObj.formData"
      :label-width="formObj.labelWidth"
      :btn-hidden="true"
      @handleEvent="handleEvent">
    </hk-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmitEvent">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/HKForm'
import { addApp, detailApp, updateApp } from '@/api/system/app'
import { nameRegx, ipRegx } from '@/utils/validate'

export default {
  name: 'addDialog',
  components: { HkForm },
  props: {
    title: {
      type: String,
      default() {
        return '标题'
      },
    },
  },
  data() {
    return {
      open: false,
      //  表单数据
      formObj: {
        btnHidden: true,
        labelWidth: '100',
        formLabels: [
          { label: '应用名称', field: 'appName', type: 'input', span: 24,maxlength:100 },
          { label: '应用标识', field: 'appCode', type: 'input', span: 24,maxlength:100 },
          { label: '应用IP地址', field: 'appIp', type: 'input', span: 24,maxlength:50 },
          { label: '应用端口', field: 'appPort', type: 'input', span: 24,maxlength:10},
          { label: '应用入口', field: 'appRoute', type: 'input', span: 24,maxlength:100 },
          { label: '备注', field: 'remark', type: 'textarea', span: 24,maxlength:256 },
        ],
        formRules: {
          appName: [
            { required: true, message: '请输入应用名称', trigger: 'blur' },
            { pattern: nameRegx, message: '应用名称只能使用中文，英文字母和数字及下划线', trigger: 'blur' },
          ],
          appCode: [
            { required: true, message: '请输入应用唯一标识', trigger: 'blur' },
            { pattern: /^[_a-zA-Z0-9]+$/, message: '应用标识只能使用英文字母和数字及下划线', trigger: 'blur' },
          ],
          appIp: [
            { required: true, message: '请输入应用服务器IP地址', trigger: 'blur' },
            { pattern: ipRegx, message: 'IP地址格式不正确', trigger: 'blur' },
          ],
          appPort: [{ pattern: /[1-9]\d*/, message: '端口格式不正确', trigger: 'blur' }],
        },
        formData: {
          appPort: 80,
          appRoute: '/'
        },
      },
      id: '',
    }
  },
  methods: {
    show(id) {
      this.open = true
      if (id) {
        this.id = id
        this.loadData(id)
      }
    },
    loadData(appId) {
      detailApp(appId).then((response) => {
        this.formObj.formData = response
      })
    },
    /**
     * @funt 保存按钮
     * */
    async handleSubmitEvent(data) {
      let res = await this.$refs.hkFormRef.handleFormSubmit('formLabels')
      if (res && this.id) {
        updateApp(Object.assign(res, { id: this.id })).then((response) => {
          this.$modal.msgSuccess('修改成功')
          this.handleCancel()
          this.$emit('submitForm', true)
        })
      } else if (res) {
        addApp(res).then((response) => {
          this.$modal.msgSuccess('新增成功')
          this.handleCancel()
          this.$emit('submitForm', true)
        })
      }
    },

    handleCancel() {
      this.open = false
      this.id = null
      this.$refs.hkFormRef.resetForm('formLabels')
      this.formObj.formData = {
        appPort: 80,
          appRoute: '/'
      }
    },
    /**
     * 表单变化事件
     * */
    handleEvent(data) {
      this.formObj.formData[data.field] = data.value
    },
  },
}
</script>

<style scoped></style>
